<template>
  <div class="count-time-wrap">
    <span class="over-text"
      >{{ tabType == 1 ? '距开始' : '距结束' }}{{ d }}</span
    >
    <span class="count-time-item ftmDIN">{{ h }}</span> :
    <span class="count-time-item ftmDIN">{{ m }}</span> :
    <span class="count-time-item ftmDIN">{{ s }}</span>
  </div>
</template>

<script>
export default {
  name: 'CountTime',
  props: {
    endTime: {
      type: String,
      default: ''
    },
    tabType: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      d: '',
      h: '00',
      m: '00',
      s: '00',
      flag: false
    };
  },
  mounted() {
    const self = this;
    const now = new Date().getTime();
    let countTime = Number(this.endTime) * 1000 - now;
    const time = setInterval(function() {
      if (self.flag) {
        clearInterval(time);
      }
      countTime -= 1000;
      self.countDown(countTime);
    }, 1000);
  },
  methods: {
    countDown(time) {
      if (time <= 1000) {
        this.flag = true;
      }
      let d;
      let h;
      let m;
      let s;
      if (time > 0) {
        d = Math.floor(time / 1000 / 60 / 60 / 24);
        h = Math.floor((time / 1000 / 60 / 60) % 24);
        m = Math.floor((time / 1000 / 60) % 60);
        s = Math.floor((time / 1000) % 60);
        d = d > 0 ? `${d}天` : '';
        h = h < 10 ? `0${h}` : h;
        m = m < 10 ? `0${m}` : m;
        s = s < 10 ? `0${s}` : s;
        this.d = d;
        this.h = `${h}`;
        this.m = `${m}`;
        this.s = `${s}`;
      } else {
        this.d = '';
        this.h = '00';
        this.m = '00';
        this.s = '00';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.count-time-wrap {
  font-size: 0.2rem;
  .over-text {
    color: #666;
    margin-right: 0.08rem;
  }
  .count-time-item {
    display: inline-block;
    padding: 0 0.04rem;
    height: 0.3rem;
    line-height: 0.3rem;
    border-radius: 0.02rem;
    background: #333;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
  }
}
</style>
